import ChartTitle from '@/components/Visual/chartTitle';
import { echartsResize } from '@/utils/echartsResize';
import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';
import './index.less';
import type { DayPayModeCount } from '../types';

function PayType(props: { dayPayModeCount: DayPayModeCount[] }) {
  let charEle;
  const chartRef: any = useRef(null); //拿到eCharts容器
  const { dayPayModeCount } = props;
  const data: any[] = [];
  const data1: any[] = [];
  const xAxis: string[] = [];
  if (dayPayModeCount.length) {
    dayPayModeCount.forEach((item) => {
      xAxis.push(item.recordDay.split('-').splice(1).join('-'));
      if (item.payModeCount.length) {
        for (const it of item.payModeCount) {
          if (it?.type == 'wechat') {
            data1.push(it.count);
            continue;
          }
          if (it?.type == 'alipay') {
            data.push(it.count);
            continue;
          }
        }
        // data.push(item.payModeCount[2].count);
        // data1.push(item.payModeCount[1].count);
      } else {
        data.push(0);
        data1.push(0);
      }
      // console.log(data);
    });
  }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  const option = {
    backgroundColor: 'transparent',
    legend: {
      show: true,
      left: '40%',
      top: '0%',
      itemGap: 20,
      itemWidth: 8,
      itemHeight: 2,
      data: [
        {
          name: '支付宝',
          icon: 'rect',
          textStyle: {
            color: '#D0DEEE',
          },
          itemStyle: {
            color: '#D0DEEE',
          },
        },
        {
          name: '微信',
          icon: 'rect',
          textStyle: {
            color: '#D0DEEE',
          },
          itemStyle: {
            color: '#66E1DF',
          },
        },
      ],
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        label: {
          show: true,
          backgroundColor: '#fff',
          color: '#556677',
          borderColor: 'rgba(0,0,0,0)',
          shadowColor: 'rgba(0,0,0,0)',
          shadowOffsetY: 0,
        },
        lineStyle: {
          width: 0,
        },
      },
      backgroundColor: '#fff',
      textStyle: {
        color: '#5c6c7c',
      },
    },
    // grid: {
    //   top: '15%',
    // },
    grid: {
      top: '12%',
      right: '5%',
      left: '5%',
      bottom: '19%',
    },
    xAxis: [
      {
        type: 'category',
        // offset: 10,
        // nameLocation:"middle",
        data: xAxis,
        axisLine: {
          //   onZero: true,
          lineStyle: {
            // type: 'dashed',
            color: '#6C8097',
            // offset: 10,
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 1,
          textStyle: {
            color: '#D0DEEE',
          },
          // 默认x轴字体大小
          fontSize: 12,
          // margin:文字到x轴的距离
        },
        boundaryGap: false,
        splitLine: {
          show: true,
          //   onZero: true,
          interval: 0,
          lineStyle: {
            type: 'dashed',
            color: 'rgba(108, 128, 151, 0.3)',
            // dashOffset: 5,
            // offset: 10,
          },
        },
        // splitArea: {
        //   show: true,
        //   areaStyle: {
        //     color: ['transparent', 'rgba(108, 128, 151, 0.3)'], // 定义 splitArea 的颜色
        //     opacity: 1
        //   }
        // },
      },
    ],
    yAxis: [
      {
        type: 'value',
        name: '单位',
        show: true,
        // gridIndex: 1,
        onZero: true,
        axisTick: {
          show: false,
        },
        // interval: 1,
        minInterval: 1,
        axisLine: {
          show: false,
          lineStyle: {
            type: 'dashed',
            color: '#6C8097',
            offset: 20,
            // z: 999,
          },
        },
        axisLabel: {
          interval: 1,
          textStyle: {
            color: '#6C8097',
          },
        },
        splitLine: {
          show: true,
          length: '120%',
          lineStyle: {
            type: 'dashed',
            width: 1,
            color: 'rgba(108, 128, 151, 0.3)',
          },
        },
      },
    ],
    series: [
      {
        name: '支付宝',
        type: 'line',
        data: data,
        symbolSize: 1,
        symbol: 'circle',
        smooth: true,
        yAxisIndex: 0,
        showSymbol: false,
        lineStyle: {
          width: 1,
          color: '#D0DEEE',
        },
        itemStyle: {
          normal: {
            color: '#D0DEEE',
            borderColor: '#D0DEEE',
          },
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: 'rgba(208, 222, 238, 0.4)',
                },
                {
                  offset: 1,
                  color: 'rgba(208, 222, 238, 0)',
                },
              ],
              false,
            ),
          },
        },
      },
      {
        name: '微信',
        type: 'line',
        data: data1,
        symbolSize: 1,
        symbol: 'circle',
        smooth: true,
        yAxisIndex: 0,
        showSymbol: false,
        lineStyle: {
          width: 1,
          color: '#66E1DF',
        },
        itemStyle: {
          normal: {
            color: '#66E1DF',
            borderColor: '#66E1DF',
          },
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: 'rgba(102, 225, 223, 0.2)',
                },
                {
                  offset: 1,
                  color: 'rgba(0,0,0,0)',
                },
              ],
              false,
            ),
          },
        },
      },
    ],
  };

  useEffect(() => {
    const initChart = () => {
      const char = document.getElementById('PayType');
      if (char) {
        // eslint-disable-next-line react-hooks/exhaustive-deps
        charEle = echarts.init(char);
        chartRef.current = charEle;
        charEle.setOption(option as any);
        echartsResize(charEle);
      }
    };
    initChart();
  }, []);

  useEffect(() => {
    if (chartRef.current) {
      chartRef.current.setOption(option as any);
    }
  }, [option, props]);
  return (
    <div className="pay_type">
      <div className="title">
        <ChartTitle title="支付方式" />
        <img className="polyline" src="/visual/tabTitlePolyline.svg" alt="" />
        <img className="diamond" src="/visual/titleRectangle.svg" alt="" />
      </div>
      <div className="chart" id="PayType" ref={chartRef} />
    </div>
  );
}

export default PayType;
